<template>
  <view class="index-page">
    <!-- 顶部搜索和消息区域 -->
    <view class="header">
      <view class="search-container">
        <view class="search-box" :class="{ 'focused': isFocused }">
          <view v-if="!isFocused" class="search-icon-container">
    </view>
          <input 
            class="search-input" 
            placeholder="&#x641C;&#x7D22;" 
            :placeholder-style="isFocused ? 'text-align: left; color: #a1887f;' : 'text-align: center; color: #5d4037;'"
            confirm-type="search"
            @focus="onSearchFocus"
            @blur="onSearchBlur"
            v-model="searchText"
          />
          <view class="search-btn" @tap="doSearch">
            <text class="iconfont">&#xe616;</text>
          </view>
        </view>
      </view>
      <view class="clear-btn" @tap="goToMessages">
        <text>消息</text>
      </view>
    </view>
    
    <!-- 导航选项卡 -->
    <view class="nav-tabs-container">
      <scroll-view class="nav-tabs" scroll-x="true" show-scrollbar="false">
        <view class="nav-tabs-inner">
          <view 
            v-for="(tab, index) in tabs" 
            :key="index" 
            class="tab-item" 
            :class="{ 'active': activeTab === index }"
            @tap="switchTab(index)"
          >
            <text>{{ tab }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 广告区域 -->
    <view class="banner-container" v-if="activeTab === 0">
      <swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" interval="3000" duration="500" circular="true">
        <swiper-item v-for="(item, index) in banners" :key="index">
          <view class="banner-item">
            <text>{{ item.title }}</text>
          </view>
        </swiper-item>
      </swiper>
    </view>
    
    <!-- 推荐内容 -->
    <scroll-view class="content-scroll" scroll-y="true" v-if="activeTab === 0">
      <view class="recommend-container">
        <!-- 推荐分类 -->
        <view class="recommend-categories">
          <view class="category-item" v-for="(category, index) in recommendCategories" :key="index" @tap="filterByCategory(category.type, category.id)">
            <view class="category-icon" :style="{ backgroundColor: category.bgColor }">
              <text>{{ category.icon }}</text>
            </view>
            <text class="category-name">{{ category.name }}</text>
          </view>
        </view>
        
        <!-- 今日推荐 -->
        <view class="featured-section">
          <view class="section-header">
            <view class="section-title-wrapper">
              <text class="section-title">今日推荐</text>
              <view class="section-title-line"></view>
            </view>
            <view class="section-more-btn" @tap="goToMoreRecommended">
              <text class="section-more-text">查看更多</text>
              <text class="section-more-icon">&#xe6a3;</text>
            </view>
          </view>
          
          <view class="featured-item" @tap="goToDetail(featuredItem.id)">
            <view class="featured-image">
              <text>{{ featuredItem.image }}</text>
            </view>
            <view class="featured-badge">推荐</view>
            <view class="featured-info">
              <view class="featured-title">{{ featuredItem.name }}</view>
              <view class="featured-desc">
                <view class="featured-tags">
                  <view class="tag-item" v-for="(tag, tagIndex) in featuredItem.tags" :key="tagIndex">
                    <text>{{ tag }}</text>
                  </view>
                </view>
                <view class="featured-rating">
                  <text v-for="n in 5" :key="n" class="star" :class="{ 'active': n <= featuredItem.rating }">★</text>
                  <text class="rating-value">{{ featuredItem.rating }}</text>
                </view>
              </view>
              <view class="featured-bottom">
                <text class="featured-address">{{ featuredItem.address }}</text>
                <text class="featured-price">{{ featuredItem.price }}</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 附近养老院 -->
        <view class="nearby-section">
          <view class="section-header">
            <view class="section-title-wrapper">
              <text class="section-title">附近养老院</text>
              <view class="section-title-line"></view>
            </view>
            <view class="section-more-btn" @tap="goToMoreNearby">
              <text class="section-more-text">查看更多</text>
              <text class="section-more-icon">&#xe6a3;</text>
            </view>
          </view>
          
          <scroll-view class="horizontal-scroll" scroll-x="true" show-scrollbar="false">
            <view class="horizontal-container">
              <view 
                v-for="home in nearbyPreview" 
                :key="home.id" 
                class="horizontal-item"
                @tap="goToDetail(home.id)"
              >
                <view class="hor-image">
                  <text>{{ home.image }}</text>
                </view>
                <view class="hor-info">
                  <text class="hor-title">{{ home.name }}</text>
                  <text class="hor-distance">{{ home.distance }}</text>
                  <text class="hor-price">{{ home.price }}</text>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        
        <!-- 养老院列表 -->
        <view class="nursing-homes-section">
          <view class="section-header">
            <view class="section-title-wrapper">
              <text class="section-title">精选养老院</text>
              <view class="section-title-line"></view>
            </view>
            <view class="section-more-btn" @tap="goToMoreFeatured">
              <text class="section-more-text">查看更多</text>
              <text class="section-more-icon">&#xe6a3;</text>
            </view>
          </view>
          
          <view class="nursing-homes-grid">
            <view 
              v-for="home in nursingHomes" 
              :key="home.id" 
              class="grid-item"
              @tap="goToDetail(home.id)"
            >
              <view class="item-image">
                <text>{{ home.image }}</text>
              </view>
              <view class="item-info">
                <text class="item-title">{{ home.name }}</text>
                <view class="item-tags" v-if="home.tags">
                  <text class="tag-text">{{ home.tags ? home.tags[0] : '' }}</text>
                </view>
                <text class="item-price">{{ home.price }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 热门养老院内容 -->
    <scroll-view class="content-scroll" scroll-y="true" v-if="activeTab === 1">
      <view class="hot-nursing-homes">
        <!-- 排行榜头部 -->
        <view class="ranking-header">
          <view class="ranking-title">
            <text class="title-icon">🔥</text>
            <text class="title-text">热门养老院排行</text>
          </view>
          <view class="ranking-subtitle">根据用户评价和关注度排名</view>
        </view>
        
        <!-- 热门养老院列表 -->
        <view class="hot-list">
          <view 
            v-for="(home, index) in hotNursingHomes" 
            :key="home.id" 
            class="hot-item"
            :class="{ 'top-three': index < 3 }"
            @tap="goToDetail(home.id)"
          >
            <!-- 排名数字 -->
            <view class="hot-rank" :class="'rank-' + (index + 1)">{{ index + 1 }}</view>
            
            <!-- 养老院信息 -->
            <view class="hot-image">
              <text>{{ home.image }}</text>
            </view>
            
            <view class="hot-info">
              <view class="hot-title">{{ home.name }}</view>
              <view class="hot-desc">
                <text class="hot-tags" v-if="home.tags">{{ home.tags.join(' · ') }}</text>
                <text class="hot-price">{{ home.price }}</text>
              </view>
              <view class="hot-rating">
                <view class="rating-stars">
                  <text v-for="n in 5" :key="n" class="star" :class="{ 'active': n <= home.rating }">★</text>
                </view>
                <text class="rating-count">{{ home.reviews }}条评价</text>
              </view>
            </view>
            
            <!-- 热度标志 -->
            <view class="hot-badge" v-if="index < 3">
              <text class="badge-text">热门</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 附近养老院内容 -->
    <scroll-view class="content-scroll" scroll-y="true" v-if="activeTab === 2">
      <view class="nearby-nursing-homes">
        <!-- 位置信息头部 -->
        <view class="location-header">
          <view class="location-info">
            <text class="location-icon">📍</text>
            <view class="location-text">
              <text class="location-title">{{ currentLocation.province }} {{ currentLocation.city }}</text>
              <text class="location-detail">{{ currentLocation.address }}</text>
            </view>
          </view>
          <view class="refresh-location" @tap="refreshLocation">
            <text class="refresh-icon">↻</text>
            <text class="refresh-text">刷新</text>
          </view>
        </view>
        
        <!-- 附近养老院列表 -->
        <view class="nearby-list">
          <view v-if="isLoadingLocation" class="loading-location">
            <text class="loading-text">{{ locationStatus }}</text>
          </view>
          
          <view v-else-if="nearbyNursingHomes.length === 0" class="empty-nearby">
            <text class="empty-icon">🔍</text>
            <text class="empty-text">附近暂无养老院信息</text>
          </view>
          
          <block v-else>
            <view 
              v-for="(home) in nearbyNursingHomes" 
              :key="home.id" 
              class="nearby-item"
              @tap="goToDetail(home.id)"
            >
              <view class="nearby-image">
                <text>{{ home.image }}</text>
              </view>
              
              <view class="nearby-info">
                <view class="info-header">
                  <text class="nearby-title">{{ home.name }}</text>
                  <view class="distance-badge">
                    <text class="distance-text">{{ home.distance }}</text>
                  </view>
                </view>
                
                <view class="nearby-tags">
                  <view class="tag-item" v-for="(tag, tagIndex) in home.tags" :key="tagIndex">
                    <text>{{ tag }}</text>
                  </view>
                </view>
                
                <view class="nearby-detail">
                  <view class="detail-item">
                    <text class="detail-label">地址：</text>
                    <text class="detail-value">{{ home.address }}</text>
                  </view>
                  <view class="detail-item">
                    <text class="detail-label">价格：</text>
                    <text class="detail-value price">{{ home.price }}</text>
                  </view>
                </view>
              </view>
            </view>
            
            <view class="list-footer" v-if="nearbyNursingHomes.length > 0">
              <text class="footer-text">已显示附近{{ nearbyNursingHomes.length }}家养老院</text>
            </view>
          </block>
        </view>
      </view>
    </scroll-view>
    
    <!-- 公益活动内容 -->
    <scroll-view class="content-scroll" scroll-y="true" v-if="activeTab === 3">
      <view class="charity-activities">
        <!-- 公益活动头部 -->
        <view class="charity-header">
          <view class="charity-title">
            <text class="title-icon">❤️</text>
            <text class="title-text">爱心公益活动</text>
          </view>
          <view class="charity-subtitle">关爱老人，温暖同行</view>
        </view>
        
        <!-- 公益活动列表 -->
        <view class="charity-banner">
          <swiper class="charity-swiper" :indicator-dots="true" :autoplay="true" interval="4000" duration="500" circular="true">
            <swiper-item v-for="(banner, index) in charityBanners" :key="index" @tap="goToCharityDetail(banner.id)">
              <view class="charity-banner-item" :style="{ backgroundColor: banner.bgColor }">
                <text class="banner-title">{{ banner.title }}</text>
                <text class="banner-tag">{{ banner.tag }}</text>
              </view>
            </swiper-item>
          </swiper>
        </view>
        
        <!-- 活动分类 -->
        <view class="charity-categories">
          <view 
            v-for="(category, index) in charityCategories" 
            :key="index"
            class="category-item"
            @tap="filterCharityByCategory(category.type)"
          >
            <view class="category-icon" :style="{ backgroundColor: category.bgColor }">
              <text>{{ category.icon }}</text>
            </view>
            <text class="category-name">{{ category.name }}</text>
          </view>
        </view>
        
        <!-- 活动列表 -->
        <view class="charity-list">
          <view 
            v-for="activity in charityActivities" 
            :key="activity.id" 
            class="charity-item"
            @tap="goToCharityDetail(activity.id)"
          >
            <view class="charity-image" :style="{ backgroundColor: activity.bgColor }">
              <text>{{ activity.image }}</text>
            </view>
            
            <view class="charity-info">
              <view class="charity-title-bar">
                <text class="charity-name">{{ activity.name }}</text>
                <view class="status-badge" :class="{ 'active': activity.status === '进行中', 'coming': activity.status === '即将开始', 'ended': activity.status === '已结束' }">
                  <text>{{ activity.status }}</text>
                </view>
              </view>
              
              <view class="charity-org">
                <text class="org-name">主办方: {{ activity.organizer }}</text>
              </view>
              
              <view class="charity-time">
                <text class="time-icon">🕒</text>
                <text class="time-text">{{ activity.time }}</text>
              </view>
              
              <view class="charity-location">
                <text class="location-icon">📍</text>
                <text class="location-text">{{ activity.location }}</text>
              </view>
              
              <view class="charity-participation">
                <view class="avatar-group">
                  <view class="avatar-item" v-for="n in 3" :key="n">
                    <text>头像</text>
                  </view>
                </view>
                <text class="participation-text">{{ activity.participants }}人已报名</text>
              </view>
            </view>
          </view>
          
          <view v-if="charityActivities.length === 0" class="empty-charity">
            <text class="empty-icon">🔍</text>
            <text class="empty-text">暂无公益活动</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 页面加载时检查登录状态
onMounted(() => {
  checkLoginStatus();
});

// 检查登录状态
const checkLoginStatus = () => {
  const token = uni.getStorageSync('token');
  if (!token) {
    // 如果没有登录，继续显示首页
    console.log('未登录，但允许浏览首页');
  } else {
    console.log('已登录，token:', token);
  }
};

// 顶部选项卡
const tabs = ref(['推荐', '热门', '附近', '公益活动']);
const activeTab = ref(0);

// 轮播广告数据 - 接口获取banner，这里就可以轮播几个
const banners = ref([
  { id: 1, title: '广告' },
  { id: 2, title: '广告' },
  { id: 3, title: '广告' }
]);

// 养老院数据 - 没有数量限制，接口给几个，这里就显示几个
const nursingHomes = ref([
  { id: 1, name: '阳光颐养老年公寓', price: '2500/月起', image: '养老院图片', tags: ['环境优美', '高端设施'] },
  { id: 2, name: '康乐老年公寓', price: '2800/月起', image: '养老院图片', tags: ['专业护理', '医养结合'] },
  { id: 3, name: '松柏老年公寓', price: '3000/月起', image: '养老院图片', tags: ['环境优美', '文化活动'] },
  { id: 4, name: '福寿养老中心', price: '2700/月起', image: '养老院图片', tags: ['医疗资源', '专业护理'] },
  { id: 5, name: '长乐颐养中心', price: '2800/月起', image: '养老院图片', tags: ['环境优美', '营养餐饮'] },
  { id: 6, name: '仁爱老年公寓', price: '3000/月起', image: '养老院图片', tags: ['医养结合', '专业护理'] },
  { id: 7, name: '康宁养老公寓', price: '3200/月起', image: '养老院图片', tags: ['高端设施', '专业护理'] },
  { id: 8, name: '乐福养老中心', price: '2600/月起', image: '养老院图片', tags: ['环境优美', '文化活动'] },
  { id: 9, name: '欣和老年公寓', price: '3500/月起', image: '养老院图片', tags: ['医养结合', '高端设施'] },
  { id: 10, name: '安康老年公寓', price: '2900/月起', image: '养老院图片', tags: ['专业护理', '营养餐饮'] },
  { id: 11, name: '祥和养老中心', price: '3100/月起', image: '养老院图片', tags: ['环境优美', '医疗资源'] },
  { id: 12, name: '怡乐养老公寓', price: '3300/月起', image: '养老院图片', tags: ['高端设施', '专业护理'] }
]);

// 热门养老院数据
const hotNursingHomes = ref([
  { 
    id: 101, 
    name: '阳光颐养老年公寓', 
    price: '3200/月起', 
    image: '养老院图片',
    rating: 5,
    reviews: 128,
    tags: ['特级护理', '医疗资源']
  },
  { 
    id: 102, 
    name: '康乐老年公寓', 
    price: '2800/月起', 
    image: '养老院图片',
    rating: 4.8,
    reviews: 96,
    tags: ['环境优美', '营养餐饮']
  },
  { 
    id: 103, 
    name: '松柏老年公寓', 
    price: '3500/月起', 
    image: '养老院图片',
    rating: 4.7,
    reviews: 83,
    tags: ['医养结合', '专业护理']
  },
  { 
    id: 104, 
    name: '福寿老年公寓', 
    price: '3000/月起', 
    image: '养老院图片',
    rating: 4.6,
    reviews: 75,
    tags: ['环境优美', '专业护理']
  },
  { 
    id: 105, 
    name: '长乐颐养中心', 
    price: '3100/月起', 
    image: '养老院图片',
    rating: 4.5,
    reviews: 68,
    tags: ['环境优美', '文化活动']
  },
  { 
    id: 106, 
    name: '康宁养老公寓', 
    price: '2900/月起', 
    image: '养老院图片',
    rating: 4.4,
    reviews: 62,
    tags: ['医疗设施', '生活服务']
  },
  { 
    id: 107, 
    name: '怡和老年公寓', 
    price: '3300/月起', 
    image: '养老院图片',
    rating: 4.3,
    reviews: 59,
    tags: ['高端设施', '专业护理']
  },
  { 
    id: 108, 
    name: '乐福养老中心', 
    price: '2700/月起', 
    image: '养老院图片',
    rating: 4.2,
    reviews: 54,
    tags: ['特色膳食', '文化活动']
  }
]);

// 切换顶部选项卡
const switchTab = (index) => {
  activeTab.value = index;
  
  // 如果切换到"附近"标签且还没有获取位置
  if (index === 2 && nearbyNursingHomes.value.length === 0) {
    getLocation();
  }
};

// 处理导航栏滚动到选中项
const scrollToActiveTab = () => {
  // 由于设计为居中，这里不需要额外滚动逻辑
  console.log('切换到标签:', tabs.value[activeTab.value]);
};

// 跳转到详情页
const goToDetail = (id) => {
  uni.navigateTo({
    url: `/pages/nursing-home-detail/index?id=${id}`
  });
};

// 跳转到消息页面
const goToMessages = () => {
  uni.navigateTo({
    url: '/pages/messages/index'
  });
};

// 将养老院数据分页
const chunkedNursingHomes = ref([]);

onMounted(() => {
  checkLoginStatus();
  // 每行显示2个项目
  chunkedNursingHomes.value = chunkArray(nursingHomes.value, 2);
  
  // 获取位置信息
  if (activeTab.value === 2) {
    getLocation();
  }
});

const chunkArray = (array, chunkSize) => {
  const result = [];
  for (let i = 0; i < array.length; i += chunkSize) {
    result.push(array.slice(i, i + chunkSize));
  }
  return result;
};

// New variables for search functionality
const searchText = ref('');
const isFocused = ref(false);

const onSearchFocus = () => {
  isFocused.value = true;
};

const onSearchBlur = () => {
  isFocused.value = false;
};

// 执行搜索
const doSearch = () => {
  if (searchText.value.trim()) {
    console.log('搜索内容:', searchText.value);
    // 这里可以添加搜索逻辑
    uni.showToast({
      title: `正在搜索: ${searchText.value}`,
      icon: 'none'
    });
  }
};

// 位置相关状态
const currentLocation = ref({
  province: '定位中...',
  city: '',
  district: '',
  address: '正在获取您的位置信息',
  latitude: 0,
  longitude: 0
});
const isLoadingLocation = ref(true);
const locationStatus = ref('正在获取位置信息...');

// 附近养老院数据
const nearbyNursingHomes = ref([]);

// 获取位置信息
const getLocation = () => {
  isLoadingLocation.value = true;
  locationStatus.value = '正在获取位置信息...';
  
  uni.getLocation({
    type: 'gcj02',
    success: (res) => {
      console.log('获取位置成功', res);
      currentLocation.value.latitude = res.latitude;
      currentLocation.value.longitude = res.longitude;
      
      // 获取位置详细信息
      uni.request({
        url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=YOUR_KEY`,
        success: (addressRes) => {
          try {
            if (addressRes.data && addressRes.data.result) {
              const result = addressRes.data.result;
              currentLocation.value.province = result.address_component.province;
              currentLocation.value.city = result.address_component.city;
              currentLocation.value.district = result.address_component.district;
              currentLocation.value.address = result.formatted_addresses.recommend;
              
              // 获取到位置后，加载附近养老院
              loadNearbyNursingHomes();
            } else {
              locationStatus.value = '获取地址信息失败';
              // 模拟数据演示
              simulateNearbyNursingHomes();
            }
          } catch (e) {
            console.error('解析地址信息失败', e);
            locationStatus.value = '解析地址信息失败';
            // 模拟数据演示
            simulateNearbyNursingHomes();
          }
        },
        fail: (err) => {
          console.error('获取地址信息失败', err);
          locationStatus.value = '获取地址信息失败';
          // 模拟数据演示
          simulateNearbyNursingHomes();
        }
      });
    },
    fail: (err) => {
      console.error('获取位置失败', err);
      locationStatus.value = '无法获取位置，请检查定位权限';
      
      // 设置默认位置（模拟）
      currentLocation.value.province = '北京市';
      currentLocation.value.city = '北京市';
      currentLocation.value.address = '北京市海淀区';
      
      // 模拟数据演示
      simulateNearbyNursingHomes();
    }
  });
};

// 刷新位置
const refreshLocation = () => {
  getLocation();
};

// 加载附近养老院
const loadNearbyNursingHomes = () => {
  // 这里应该是真实请求附近养老院数据的接口
  // 目前使用模拟数据
  simulateNearbyNursingHomes();
};

// 模拟附近养老院数据
const simulateNearbyNursingHomes = () => {
  isLoadingLocation.value = false;
  
  // 模拟数据
  nearbyNursingHomes.value = [
    {
      id: 201,
      name: '颐和养老中心',
      image: '养老院图片',
      distance: '0.8km',
      address: `${currentLocation.value.district}东路189号`,
      price: '3500/月起',
      tags: ['环境优美', '医疗资源', '专业护理']
    },
    {
      id: 202,
      name: '康宁老年公寓',
      image: '养老院图片',
      distance: '1.2km',
      address: `${currentLocation.value.district}西路78号`,
      price: '3200/月起',
      tags: ['高端设施', '专业护理']
    },
    {
      id: 203,
      name: '松鹤养老院',
      image: '养老院图片',
      distance: '1.5km',
      address: `${currentLocation.value.district}南街56号`,
      price: '2800/月起',
      tags: ['环境优美', '文化活动']
    },
    {
      id: 204,
      name: '福寿养老公寓',
      image: '养老院图片',
      distance: '2.3km',
      address: `${currentLocation.value.district}北路123号`,
      price: '3000/月起',
      tags: ['医养结合', '特色膳食']
    },
    {
      id: 205,
      name: '仁爱老年之家',
      image: '养老院图片',
      distance: '3.1km',
      address: `${currentLocation.value.district}中心路45号`,
      price: '3300/月起',
      tags: ['环境优美', '文化活动', '专业护理']
    }
  ];
};

// 公益活动轮播图数据
const charityBanners = ref([
  { 
    id: 301, 
    title: '关爱老人行动月', 
    tag: '全国公益',
    bgColor: 'rgba(255, 107, 107, 0.8)'
  },
  { 
    id: 302, 
    title: '长者陪伴日', 
    tag: '社区活动',
    bgColor: 'rgba(118, 179, 255, 0.8)'
  },
  { 
    id: 303, 
    title: '夕阳红健康讲座', 
    tag: '健康公益',
    bgColor: 'rgba(128, 203, 196, 0.8)'
  }
]);

// 公益活动分类
const charityCategories = ref([
  { 
    name: '即将开始', 
    icon: '🕒', 
    type: 'coming',
    bgColor: 'rgba(118, 179, 255, 0.2)'
  },
  { 
    name: '进行中', 
    icon: '🔄', 
    type: 'active',
    bgColor: 'rgba(128, 203, 196, 0.2)'
  },
  { 
    name: '已结束', 
    icon: '✓', 
    type: 'ended',
    bgColor: 'rgba(189, 189, 189, 0.2)'
  }
]);

// 公益活动数据
const charityActivities = ref([
  {
    id: 401,
    name: '夕阳红健康知识讲座',
    organizer: '阳光社区服务中心',
    time: '2023-06-10 14:00-16:00',
    location: '海淀区社区文化中心',
    status: '进行中',
    participants: 42,
    image: '活动图片',
    bgColor: 'rgba(118, 179, 255, 0.2)',
    tags: ['健康知识', '公益讲座'],
    category: 'health'
  },
  {
    id: 402,
    name: '老年人手机使用培训',
    organizer: '科技助老协会',
    time: '2023-06-15 09:30-11:30',
    location: '朝阳区老年活动中心',
    status: '即将开始',
    participants: 28,
    image: '活动图片',
    bgColor: 'rgba(128, 203, 196, 0.2)',
    tags: ['科技培训', '志愿服务'],
    category: 'culture'
  },
  {
    id: 403,
    name: '重阳节关爱老人志愿服务',
    organizer: '爱心志愿者协会',
    time: '2023-10-23 09:00-17:00',
    location: '全市各养老院',
    status: '即将开始',
    participants: 156,
    image: '活动图片',
    bgColor: 'rgba(255, 107, 107, 0.2)',
    tags: ['重阳节', '志愿服务'],
    category: 'volunteer'
  },
  {
    id: 404,
    name: '老年人才艺展示活动',
    organizer: '市文化局',
    time: '2023-05-20 13:00-17:00',
    location: '市民文化广场',
    status: '已结束',
    participants: 78,
    image: '活动图片',
    bgColor: 'rgba(255, 193, 7, 0.2)',
    tags: ['才艺展示', '文化活动'],
    category: 'culture'
  }
]);

// 原始公益活动数据备份，用于筛选后恢复
const originalCharityActivities = ref([...charityActivities.value]);

// 筛选公益活动
const filterCharityByCategory = (categoryType) => {
  if (categoryType === 'all') {
    // 恢复所有活动
    charityActivities.value = [...originalCharityActivities.value];
    return;
  }
  
  // 按活动状态筛选
  let statusMap = {
    'coming': '即将开始',
    'active': '进行中',
    'ended': '已结束'
  };
  
  // 按状态筛选
  charityActivities.value = originalCharityActivities.value.filter(activity => 
    activity.status === statusMap[categoryType]
  );
  
  // 如果筛选后没有活动，显示提示
  if (charityActivities.value.length === 0) {
    uni.showToast({
      title: '暂无' + statusMap[categoryType] + '的活动',
      icon: 'none'
    });
    // 2秒后恢复所有活动
    setTimeout(() => {
      charityActivities.value = [...originalCharityActivities.value];
    }, 2000);
  }
};

// 跳转到公益活动详情页
const goToCharityDetail = (id) => {
  uni.navigateTo({
    url: `/pages/charity-detail/index?id=${id}`
  });
};

// 推荐分类
const recommendCategories = ref([
  { name: '公办非营利性', icon: '🏢', type: 'public_nonprofit', bgColor: 'rgba(255, 107, 107, 0.2)', id: 1 },
  { name: '民办非营利性', icon: '🏥', type: 'private_nonprofit', bgColor: 'rgba(118, 179, 255, 0.2)', id: 2 },
  { name: '公办营利性', icon: '🎭', type: 'public_profit', bgColor: 'rgba(128, 203, 196, 0.2)', id: 3 },
  { name: '民办营利性', icon: '👨‍👩‍👧‍👦', type: 'private_profit', bgColor: 'rgba(255, 193, 7, 0.2)', id: 4 }
]);

// 今日推荐养老院
const featuredItem = ref({
  id: 101,
  name: '阳光颐养老年公寓',
  image: '养老院图片',
  address: '海淀区西北旺东路10号院',
  price: '3200/月起',
  rating: 4.8,
  tags: ['特级护理', '医疗资源', '环境优美']
});

// 附近养老院预览
const nearbyPreview = ref([
  {
    id: 201,
    name: '颐和养老中心',
    image: '养老院图片',
    distance: '0.8km',
    price: '3500/月起'
  },
  {
    id: 202,
    name: '康宁老年公寓',
    image: '养老院图片',
    distance: '1.2km',
    price: '3200/月起'
  },
  {
    id: 203,
    name: '松鹤养老院',
    image: '养老院图片',
    distance: '1.5km',
    price: '2800/月起'
  },
  {
    id: 204,
    name: '福寿养老公寓',
    image: '养老院图片',
    distance: '2.3km',
    price: '3000/月起'
  }
]);

// 按分类筛选
const filterByCategory = (type, id) => {
  console.log('筛选类别:', type, '类别ID:', id);
  // 这里可以添加筛选逻辑
  // 通过id调用后端接口查询类似养老院
  uni.showToast({
    title: `已选择${type}类别`,
    icon: 'none'
  });
};

// 跳转到更多推荐页面
const goToMoreRecommended = () => {
  uni.navigateTo({
    url: '/pages/more-recommended/index'
  });
};

// 跳转到更多附近养老院页面
const goToMoreNearby = () => {
  uni.navigateTo({
    url: '/pages/more-nearby/index'
  });
};

// 跳转到更多精选养老院页面
const goToMoreFeatured = () => {
  uni.navigateTo({
    url: '/pages/more-featured/index'
  });
};
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #ffffff;
}

.index-page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 50px; /* 为tabBar预留空间 */
  
  // 顶部搜索和消息区域
  .header {
    padding: 15px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid rgba(44, 120, 115, 0.1);
    
    .search-container {
      flex: 1;
      margin-right: 15px;
      
      .search-box {
        display: flex;
        align-items: center;
        height: 40px;
        background-color: rgba(195, 227, 227, 0.2);
        border-radius: 20px;
        padding: 0 15px;
        border: 1px solid #c3e3e3;
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        position: relative;
        overflow: hidden;
        
        &.focused {
          border-color: #2c7873;
          box-shadow: 0 2px 8px rgba(44, 120, 115, 0.2);
          background-color: rgba(255, 255, 255, 0.9);
        }
        
        .search-icon-container {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          display: flex;
  align-items: center;
  justify-content: center;
          pointer-events: none;
          z-index: 1;
          transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
          opacity: 0.8;
          
          .search-icon {
            font-size: 18px;
            color: #2c7873;
          }
        }
        
        .search-input {
          flex: 1;
          height: 100%;
          font-size: 15px;
          color: #2c7873;
          background-color: transparent;
          border: none;
          transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
          text-align: center;
          position: relative;
          z-index: 2;
          
          &::placeholder {
            color: #2c7873;
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
          }
        }
        
        &.focused .search-input {
          text-align: left;
        }
        
        .search-btn {
          width: 30px;
          height: 30px;
  display: flex;
          align-items: center;
  justify-content: center;
          background-color: #c3e3e3;
          border-radius: 50%;
          margin-left: 5px;
          
          .iconfont {
            color: #2c7873;
            font-size: 16px;
          }
          
          &:active {
            background-color: #2c7873;
            .iconfont {
              color: #ffffff;
            }
          }
        }
      }
    }
    
    .clear-btn {
      width: 60px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(195, 227, 227, 0.2);
      border-radius: 20px;
      border: 1px solid #c3e3e3;
      
      text {
        color: #2c7873;
        font-size: 14px;
      }
      
      &:active {
        background-color: rgba(44, 120, 115, 0.1);
      }
    }
  }
  
  // 导航选项卡
  .nav-tabs-container {
    background-color: #fff;
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid rgba(141, 110, 99, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  
  .nav-tabs {
    width: 100%;
    white-space: nowrap;
    
    .nav-tabs-inner {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 0;
      min-width: 100%;
      
      .tab-item {
        position: relative;
        padding: 15px 0;
        width: 25%; /* 四个选项均分宽度 */
        font-size: 15px;
        color: #6FB3B8;
        display: inline-block;
        flex-shrink: 0;
        transition: all 0.3s;
        text-align: center;
        
        &:after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 3px;
          background-color: #c3e3e3;
          transition: all 0.3s;
        }
        
        &.active {
          color: #2c7873;
          font-weight: 600;
          
          &:after {
            width: 40%;
            max-width: 40px;
          }
        }
        
        &:active {
          opacity: 0.7;
        }
      }
    }
  }
  
  // 广告轮播区域
  .banner-container {
    padding: 15px;
    background-color: #fff;
    border-bottom: 1px solid rgba(195, 227, 227, 0.3);
    
    .banner-swiper {
      height: 150px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(44, 120, 115, 0.1);
      border: 1px solid rgba(195, 227, 227, 0.3);
      
      .banner-item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #c3e3e3 0%, #2c7873 100%);
        
        text {
          color: #fff;
          font-size: 20px;
          font-weight: 600;
        }
      }
    }
  }
  
  // 推荐页面样式
  .recommend-container {
    background-color: #f5f5f5;
    min-height: 100%;
    
    // 推荐分类
    .recommend-categories {
      display: flex;
      justify-content: space-between;
      padding: 15px 15px 5px;
      background-color: #fff;
      
      .category-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 23%;
        
        .category-icon {
          width: 55px;
          height: 55px;
          border-radius: 27.5px;
          background-color: rgba(195, 227, 227, 0.3);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 8px;
          
          .iconfont {
            font-size: 28px;
            color: #2c7873;
          }
        }
        
        .category-name {
          font-size: 13px;
          color: #2c7873;
          text-align: center;
        }
        
        &:nth-child(1) .category-icon {
          background-color: rgba(195, 227, 227, 0.3);
        }
        
        &:nth-child(2) .category-icon {
          background-color: rgba(195, 227, 227, 0.4);
        }
        
        &:nth-child(3) .category-icon {
          background-color: rgba(195, 227, 227, 0.5);
        }
        
        &:nth-child(4) .category-icon {
          background-color: rgba(195, 227, 227, 0.6);
        }
      }
    }
    
    // 今日推荐样式
    .featured-section {
      margin-top: 10px;
      background-color: #fff;
      
      .featured-item {
        position: relative;
        margin: 0 15px 15px 15px;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        
        .featured-image {
          height: 180px;
          background-color: rgba(195, 227, 227, 0.3);
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          
          .image-gradient {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background: linear-gradient(to bottom, transparent, rgba(195, 227, 227, 0.8));
          }
          
          text {
            color: #6FB3B8;
            font-size: 18px;
          }
        }
        
        .featured-badge {
          position: absolute;
          top: 12px;
          right: 12px;
          padding: 4px 10px;
          background-color: rgba(195, 227, 227, 0.85);
          color: white;
          font-size: 12px;
          font-weight: 600;
          border-radius: 15px;
        }
        
        .featured-info {
          padding: 12px;
          
          .featured-title {
            font-size: 16px;
            font-weight: 600;
            color: #2c7873;
            margin-bottom: 8px;
          }
          
          .featured-desc {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            
            .featured-tags {
              display: flex;
              flex-wrap: wrap;
              flex: 1;
              overflow: hidden;
              
              .tag-item {
                padding: 2px 8px;
                background-color: rgba(195, 227, 227, 0.08);
                border-radius: 4px;
                margin-right: 6px;
                margin-bottom: 6px;
                
                text {
                  font-size: 11px;
                  color: #6FB3B8;
                }
              }
            }
            
            .featured-rating {
              display: flex;
              align-items: center;
              
              .star {
                color: #D1D1D1;
                font-size: 14px;
                
                &.active {
                  color: #FFB400;
                }
              }
              
              .rating-value {
                font-size: 12px;
                color: #2c7873;
                margin-left: 4px;
              }
            }
          }
          
          .featured-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            .featured-address {
              font-size: 12px;
              color: #6FB3B8;
              flex: 1;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            
            .featured-price {
              font-size: 14px;
              color: #FF6B6B;
              font-weight: 600;
            }
          }
        }
      }
    }
    
    // 附近养老院横向滚动
    .nearby-section {
      margin-top: 10px;
      background-color: #fff;
      
      .horizontal-scroll {
        width: 100%;
        white-space: nowrap;
        
        .horizontal-container {
          display: inline-flex;
          padding: 0 15px 15px 15px;
          
          .horizontal-item {
            width: 140px;
            margin-right: 15px;
            flex-shrink: 0;
            border-radius: 10px;
            overflow: hidden;
            background-color: #fff;
            box-shadow: 0 2px 8px rgba(44, 120, 115, 0.08);
            
            .hor-image {
              height: 100px;
              background-color: rgba(195, 227, 227, 0.2);
              display: flex;
              justify-content: center;
              align-items: center;
              
              text {
                color: #6FB3B8;
                font-size: 14px;
              }
            }
            
            .hor-info {
              padding: 8px;
              
              .hor-title {
                font-size: 14px;
                font-weight: 600;
                color: #2c7873;
                display: block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-bottom: 4px;
              }
              
              .hor-distance {
                font-size: 12px;
                color: #6FB3B8;
                display: block;
                margin-bottom: 4px;
              }
              
              .hor-price {
                font-size: 13px;
                color: #FF6B6B;
                font-weight: 600;
                display: block;
              }
            }
          }
        }
      }
    }
    
    // 养老院网格列表
    .nursing-homes-section {
      margin-top: 10px;
      background-color: #fff;
      padding-bottom: 20px;
      
      .nursing-homes-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 15px;
        
        .grid-item {
          background-color: #fff;
          border-radius: 10px;
          overflow: hidden;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
          border: 1px solid rgba(141, 110, 99, 0.1);
          
          .item-image {
            height: 120px;
            background-color: rgba(195, 227, 227, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            
            text {
              color: #6FB3B8;
              font-size: 14px;
            }
          }
          
          .item-info {
            padding: 10px;
            
            .item-title {
              font-size: 14px;
              font-weight: 600;
              color: #2c7873;
              display: block;
              margin-bottom: 5px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            
            .item-tags {
              margin-bottom: 5px;
              
              .tag-text {
                font-size: 12px;
                color: #6FB3B8;
                background-color: rgba(195, 227, 227, 0.3);
                padding: 2px 6px;
                border-radius: 3px;
              }
            }
            
            .item-price {
              font-size: 13px;
              color: #FF6B6B;
              font-weight: 600;
            }
          }
        }
      }
    }
  }
  
  // 内容滚动区域
  .content-scroll {
    flex: 1;
    height: calc(100vh - 260px); /* 减去顶部区域高度 */
    
    .content-grid {
      padding: 15px;
      background-color: #ffffff;
      
      // ... existing code ...
    }
  }
}

// 响应式调整
@media screen and (max-width: 375px) {
  .index-page {
    .content-scroll {
      .content-grid {
        .grid-row {
          .grid-item {
            .item-image {
              height: 100px;
            }
          }
        }
      }
    }
  }
}

// 热门养老院样式
.hot-nursing-homes {
  background-color: #fff;
  padding: 15px;
  
  .ranking-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(141, 110, 99, 0.1);
    
    .ranking-title {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
      
      .title-icon {
        font-size: 18px;
        margin-right: 8px;
      }
      
      .title-text {
        font-size: 18px;
        font-weight: 600;
        color: #2c7873;
      }
    }
    
    .ranking-subtitle {
      font-size: 14px;
      color: #6FB3B8;
    }
  }
  
  .hot-list {
    .hot-item {
      display: flex;
      position: relative;
      margin-bottom: 20px;
      padding: 15px;
      border-radius: 12px;
      background-color: #fff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(141, 110, 99, 0.1);
      transition: transform 0.3s;
      
      &:active {
        transform: scale(0.98);
      }
      
      &.top-three {
        background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(253, 245, 230, 0.8) 100%);
        border-color: rgba(218, 165, 32, 0.3);
      }
      
      .hot-rank {
        position: absolute;
        top: -10px;
        left: -10px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #8d6e63;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 14px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        z-index: 1;
        
        &.rank-1 {
          background-color: #FFD700; // 金色
          color: #2c7873;
        }
        
        &.rank-2 {
          background-color: #C0C0C0; // 银色
          color: #2c7873;
        }
        
        &.rank-3 {
          background-color: #CD7F32; // 铜色
          color: white;
        }
      }
      
      .hot-image {
        width: 90px;
        height: 90px;
        border-radius: 8px;
        overflow: hidden;
        background-color: rgba(141, 110, 99, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        
        text {
          color: #6FB3B8;
          font-size: 14px;
        }
      }
      
      .hot-info {
        flex: 1;
        padding-left: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .hot-title {
          font-size: 16px;
          font-weight: 600;
          color: #2c7873;
          margin-bottom: 5px;
        }
        
        .hot-desc {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
          
          .hot-tags {
            font-size: 12px;
            color: #6FB3B8;
          }
          
          .hot-price {
            font-size: 14px;
            font-weight: 600;
            color: #FF6B6B;
          }
        }
        
        .hot-rating {
          display: flex;
          align-items: center;
          
          .rating-stars {
            display: flex;
            margin-right: 5px;
            
            .star {
              color: #D1D1D1;
              font-size: 14px;
              
              &.active {
                color: #FFB400;
              }
            }
          }
          
          .rating-count {
            font-size: 12px;
            color: #6FB3B8;
          }
        }
      }
      
      .hot-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: rgba(195, 227, 227, 0.4);
        border: 1px solid #c3e3e3;
        border-radius: 15px;
        padding: 3px 8px;
        
        .badge-text {
          font-size: 12px;
          color: #2c7873;
        }
      }
    }
  }
}

// 附近养老院样式
.nearby-nursing-homes {
  background-color: #fff;
  min-height: 100%;
  
  .location-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid rgba(141, 110, 99, 0.1);
    
    .location-info {
      display: flex;
      align-items: center;
      flex: 1;
      
      .location-icon {
        font-size: 20px;
        margin-right: 10px;
      }
      
      .location-text {
        display: flex;
        flex-direction: column;
        
        .location-title {
          font-size: 16px;
          font-weight: 600;
          color: #2c7873;
          margin-bottom: 4px;
        }
        
        .location-detail {
          font-size: 12px;
          color: #6FB3B8;
          width: 220px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    
    .refresh-location {
      display: flex;
      align-items: center;
      padding: 6px 12px;
      background-color: rgba(141, 110, 99, 0.1);
      border-radius: 20px;
      
      .refresh-icon {
        font-size: 14px;
        margin-right: 4px;
      }
      
      .refresh-text {
        font-size: 12px;
        color: #2c7873;
      }
      
      &:active {
        background-color: rgba(141, 110, 99, 0.2);
      }
    }
  }
  
  .nearby-list {
    padding: 15px;
    
    .loading-location, .empty-nearby {
      height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      
      .loading-text, .empty-text {
        color: #6FB3B8;
        font-size: 14px;
        margin-top: 10px;
      }
      
      .empty-icon {
        font-size: 30px;
        margin-bottom: 10px;
      }
    }
    
    .nearby-item {
      display: flex;
      margin-bottom: 15px;
      padding: 15px;
      border-radius: 12px;
      background-color: #fff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(141, 110, 99, 0.1);
      
      .nearby-image {
        width: 100px;
        height: 100px;
        border-radius: 8px;
        overflow: hidden;
        background-color: rgba(141, 110, 99, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        
        text {
          color: #6FB3B8;
          font-size: 14px;
        }
      }
      
      .nearby-info {
        flex: 1;
        padding-left: 15px;
        display: flex;
        flex-direction: column;
        
        .info-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 8px;
          
          .nearby-title {
            font-size: 16px;
            font-weight: 600;
            color: #2c7873;
          }
          
          .distance-badge {
            background-color: rgba(141, 110, 99, 0.1);
            padding: 2px 8px;
            border-radius: 12px;
            
            .distance-text {
              font-size: 12px;
              color: #2c7873;
            }
          }
        }
        
        .nearby-tags {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 8px;
          
          .tag-item {
            padding: 2px 6px;
            background-color: rgba(141, 110, 99, 0.05);
            border-radius: 4px;
            margin-right: 6px;
            margin-bottom: 6px;
            
            text {
              font-size: 12px;
              color: #6FB3B8;
            }
          }
        }
        
        .nearby-detail {
          .detail-item {
            display: flex;
            margin-bottom: 4px;
            
            .detail-label {
              font-size: 12px;
              color: #6FB3B8;
              width: 42px;
            }
            
            .detail-value {
              font-size: 12px;
              color: #2c7873;
              flex: 1;
              
              &.price {
                color: #FF6B6B;
                font-weight: 600;
              }
            }
          }
        }
      }
    }
    
    .list-footer {
      text-align: center;
      padding: 10px 0;
      
      .footer-text {
        font-size: 12px;
        color: #6FB3B8;
      }
    }
  }
}

// 公益活动样式
.charity-activities {
  background-color: #fff;
  min-height: 100%;
  
  .charity-header {
    padding: 15px;
    border-bottom: 1px solid rgba(141, 110, 99, 0.1);
    
    .charity-title {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
      
      .title-icon {
        font-size: 18px;
        margin-right: 8px;
      }
      
      .title-text {
        font-size: 18px;
        font-weight: 600;
        color: #2c7873;
      }
    }
    
    .charity-subtitle {
      font-size: 14px;
      color: #6FB3B8;
    }
  }
  
  .charity-banner {
    padding: 15px;
    
    .charity-swiper {
      height: 120px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(93, 64, 55, 0.08);
      
      .charity-banner-item {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 15px;
        
        .banner-title {
          font-size: 18px;
          font-weight: 600;
          color: #fff;
          text-align: center;
          margin-bottom: 10px;
          text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }
        
        .banner-tag {
          font-size: 12px;
          color: #fff;
          background-color: rgba(255, 255, 255, 0.3);
          padding: 3px 10px;
          border-radius: 12px;
        }
      }
    }
  }
  
  .charity-categories {
    display: flex;
    justify-content: space-between;
    padding: 5px 15px 20px 15px;
    border-bottom: 1px solid rgba(141, 110, 99, 0.05);
    
    .category-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 22%;
      
      .category-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 8px;
        
        text {
          font-size: 22px;
        }
      }
      
      .category-name {
        font-size: 12px;
        color: #2c7873;
      }
      
      &:active {
        opacity: 0.7;
      }
    }
  }
  
  .charity-list {
    padding: 15px;
    
    .charity-item {
      margin-bottom: 15px;
      border-radius: 12px;
      background-color: #fff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(141, 110, 99, 0.1);
      overflow: hidden;
      
      .charity-image {
        height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
        
        text {
          color: #6FB3B8;
          font-size: 16px;
        }
      }
      
      .charity-info {
        padding: 15px;
        
        .charity-title-bar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
          
          .charity-name {
            font-size: 16px;
            font-weight: 600;
            color: #2c7873;
            flex: 1;
          }
          
          .status-badge {
            padding: 3px 8px;
            border-radius: 12px;
            background-color: #8d8d8d;
            
            text {
              font-size: 12px;
              color: #fff;
            }
            
            &.active {
              background-color: #4CAF50;
            }
            
            &.coming {
              background-color: #2196F3;
            }
            
            &.ended {
              background-color: #9E9E9E;
            }
          }
        }
        
        .charity-org {
          margin-bottom: 10px;
          
          .org-name {
            font-size: 14px;
            color: #2c7873;
            font-weight: 500;
          }
        }
        
        .charity-time, .charity-location {
          display: flex;
          align-items: center;
          margin-bottom: 8px;
          
          .time-icon, .location-icon {
            font-size: 14px;
            margin-right: 8px;
          }
          
          .time-text, .location-text {
            font-size: 13px;
            color: #6FB3B8;
          }
        }
        
        .charity-participation {
          display: flex;
          align-items: center;
          margin-top: 10px;
          
          .avatar-group {
            display: flex;
            margin-right: 10px;
            
            .avatar-item {
              width: 24px;
              height: 24px;
              border-radius: 50%;
              background-color: rgba(141, 110, 99, 0.1);
              margin-right: -8px;
              display: flex;
              justify-content: center;
              align-items: center;
              border: 1px solid #fff;
              
              text {
                font-size: 10px;
                color: #6FB3B8;
              }
            }
          }
          
          .participation-text {
            font-size: 12px;
            color: #6FB3B8;
          }
        }
      }
      
      &:active {
        transform: scale(0.98);
      }
    }
  }
  
  .empty-charity {
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    .empty-icon {
      font-size: 30px;
      margin-bottom: 10px;
    }
    
    .empty-text {
      color: #6FB3B8;
      font-size: 14px;
    }
  }
}

// 临时占位样式
.charity-placeholder {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #6FB3B8;
  font-size: 16px;
  background-color: #fff;
}

// 添加到CSS样式部分
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 15px 10px;
  
  .section-title-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
    
    .section-title {
      font-size: 17px;
      font-weight: 600;
      color: #2c7873;
      position: relative;
      padding-left: 10px;
      
      &:before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background-color: #c3e3e3;
        border-radius: 2px;
      }
    }
    
    .section-title-line {
      margin-top: 4px;
      width: 20px;
      height: 2px;
      background-color: #c3e3e3;
      margin-left: 10px;
    }
  }
  
  .section-more-btn {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background-color: rgba(195, 227, 227, 0.15);
    border-radius: 15px;
    transition: all 0.3s;
    
    .section-more-text {
      font-size: 12px;
      color: #2c7873;
    }
    
    .section-more-icon {
      font-size: 12px;
      color: #2c7873;
      margin-left: 3px;
    }
    
    &:active {
      background-color: rgba(195, 227, 227, 0.3);
      transform: scale(0.96);
    }
  }
}
</style>


